<template>
    <div>
        <!-- 使用span作为触发器，通常我们会使用按钮或其他可点击元素 -->
        <span class="datebox-trigger" @click="showDatebox">选择日期</span>

        <!-- 隐藏的input用于存储datebox的值 -->
        <input ref="dateboxInput" type="text" class="easyui-datebox" style="display: none;" v-model="dateValue" />
    </div>
</template>

<script>
import $ from 'jquery'


export default {
    name: "Header",
    data() {
        return {
            dateValue: '' // 绑定到input的值
        };
    },
    mounted() {
        // 在这里初始化datebox（如果尚未初始化）
        if (!$(this.$refs.dateboxInput).hasClass('easyui-datebox')) {
            $(this.$refs.dateboxInput).datebox({
                // 可以在这里配置datebox的选项
                formatter: function(date){
                    var y = date.getFullYear();
                    var m = date.getMonth()+1;
                    var d = date.getDate();
                    return (m<10?('0'+m):m) + '-' + (d<10?('0'+d):d) + '-' + y;
                },
                parser: function(s){
                    if (!s) return new Date();
                    var ss = s.split('-');
                    var y = parseInt(ss[0],10);
                    var m = parseInt(ss[1],10);
                    var d = parseInt(ss[2],10);
                    if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
                        return new Date(y,m-1,d);
                    } else {
                        return new Date();
                    }
                },
                onChange: (newValue) => {
                    // 当日期改变时更新Vue的data值
                    this.dateValue = newValue;
                    // 如果你需要通知父组件，可以发射一个自定义事件
                    this.$emit('update:value', newValue);
                }
            });
        }

        // 如果props中有初始值，则设置到datebox中
        if (this.dateValue) {
            $(this.$refs.dateboxInput).datebox('setValue', this.dateValue);
        }
    },
    methods: {
        showDatebox() {
            // 由于datebox是隐藏的，我们不能直接点击它，但可以通过触发focus事件来打开日期选择器
            $(this.$refs.dateboxInput).datebox('openCalendar');
        }
    },
    // 你可以在这里添加props，以便从父组件接收值
    // ...
};
</script>

<style scoped>
/* 如果有需要，你可以在这里添加针对该组件的样式 */
.datebox-trigger {
    cursor: pointer;
    /* 其他样式 */
}
</style>
